<template>
    <div id="tem_bg">
        <div style="padding-top: 1rem">
            <img src="../../static/image/bt_icon_1.gif" style="width: 65%">
            <img src="../../static/image/bt_icon_2.gif" style="width: 100%">
        </div>
        <yd-flexbox id="five">
            <div link="/classify" class="five_bg"><img  slot="icon" src="../../static/image/tem_1.gif" style="width: 25%"><br/><span slot="text">超值低价</span></div>
            <div link="/Article?article_id=10000" class="five_bg"><img  slot="icon" src="../../static/image/tem_2.gif" style="width: 25%"><br/><span slot="text">专属顾问</span></div>
            <div link="/Article?article_id=10001" class="five_bg"><img  slot="icon" src="../../static/image/tem_3.gif" style="width: 25%"><br/><span slot="text">定制服务</span></div>
            <div link="/Article?article_id=10002" class="five_bg"><img  slot="icon" src="../../static/image/tem_4.gif" style="width: 25%"><br/><span slot="text">生日惊喜</span></div>
        </yd-flexbox>

        <div style="clear: both">
            <img src="../../static/image/user_vip.png"/>
            <div class="bottom_div">
                <ul v-for="(item, key) in levelList" :key="key">
                    <li v-show="item.isvip=='0'"  @click="OpenVip(item.id)" class="button_cs">
                        <div class="bottom_li_div">点击开通<span id="tem_dec1">{{item.name}}</span></div>
                    </li>
                    <li v-show="item.isvip=='1'" class="button_cs">
                        <div class="bottom_li_div">
                            您已开通<span>{{item.name}}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<style type="text/css">
    #tem_bg{
        background-image: url("../../static/image/tem_bg.gif");
        background-size:100% 100%;
        min-height: 11.26rem;
    }
    #tem_dec1{
        color: red;
        font-weight: bold;
    }
    #five{
        margin: 0.5rem;
        border-radius: 0.2rem;
        border: 0.01rem solid #f9d681;
    }
    .five_bg{
        padding: 0.15rem 0 0.15rem 0;
       border-right: 0.01rem solid #f9d681;
    }
    .five_bg:nth-child(4){
         border-right: 0;
     }
    .five_bg span{
        color: #f9d681;
    }
    .bottom_div{
        width: 100%;
    }
    .bottom_div ul{
        width: 50%;
        text-align: center;
        display: inline-table;

    }
    .bottom_div ul li{
        text-align: center;

    }
    .bottom_div ul li div.bottom_li_div{
        width: 129px;
        background-color: #f9d681;
        border-radius: 0.2rem;
        border: 0.01rem ;
        margin: 5px auto;
        line-height: 35px;
        height: 35px;
    }
</style>

<script type="text/babel">
    export default {
        data () {
            return {
                levelList: []
            }
        },
        mounted () {
            this.getUserList()
        },
        methods: {
            // 获取用户昵称头像等信息
            getUserList () {
                this.$api.userLevel({ }, res => {
                    if (res.status) {
                        this.levelList = res.data
                    }

                })
            },
            OpenVip (mylevel) {
                this.$api.createVipOrder({ level: mylevel }, res => {
                    if (res.status) {
                        this.$router.replace({path: '/cashiervip', query: {order_id: res.data.order_id}})
                    } else {
                        this.$dialog.toast({mes: res.data, timeout: 1000})
                    }
                })
            }
        }
    }
</script>
